<template>
  <div v-loading="loading" class="binding">
    <div class="binding-top">提现账户绑定（未绑定）</div>
    <div class="binding-main">
      <div class="binding-car">
        <h4>绑定账户</h4>
        <div>
          <!-- <span>对公银行卡：</span>
          <div>
            <div class="binding-bank-off">
              <div>
                <img :src=" require('@/assets/images/icon-bindingcar.png')" alt />
                <div>绑定银行卡</div>
              </div>
            </div>
            <div class="binding-bank-car">
              <bank :card-num="'6228482098632128577'" :status="0" class="binding-bank-car-bank" />
              <bank :card-num="'6228482098632128577'" :status="1" />
            </div>
            <div>
              <el-button type="primary" @click="dialogBindingAlipay = true">修改</el-button>

            </div>
          </div>-->
          <div class="pay-binding">
            <div class="pay-binding-image">
              <img :src="require('@/assets/images/icon-alipay.png')" alt="支付宝">
            </div>
            <div class="pay-binding-user">
              <span>
                支付宝账号：
                <span v-show="form.flag" style="text-align:left;">{{ form.alipayName }}</span>
              </span>
              <el-link
                v-if="!form.flag"
                type="primary"
                :underline="false"
                @click="dialogBindingAlipay = true;bindingName = '支付宝';dialogTitle='绑定'"
              >去绑定</el-link>
              <el-link
                v-else
                type="primary"
                :underline="false"
                class="change"
                @click="dialogBindingAlipay = true;bindingName = '微信';dialogTitle='修改'"
              >修改</el-link>
            </div>
          </div>
          <div class="pay-binding">
            <div class="pay-binding-image">
              <img :src="require('@/assets/images/icon-wechat.png')" alt="微信">
            </div>
            <div class="pay-binding-user">
              <span>
                微信账号：
                <span v-show="wechatFlag" style="text-align:left;">{{ wxName }}</span>
              </span>
              <el-link
                v-if="!wechatFlag"
                type="primary"
                :underline="false"
                @click="toBindingwx()"
              >去绑定</el-link>
              <el-link
                v-else
                type="primary"
                :underline="false"
                class="change"
                @click="toBindingwx()"
              >修改</el-link>
            </div>
          </div>
        </div>
      </div>
      <div class="binding-message">
        <div>说明</div>
        <div>
          <div>绑定对公账户</div>
          <div>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。这里可以放一些关于产品的常见问题说明。</div>
        </div>
        <div>
          <div>绑定对公账户</div>
          <div>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。这里可以放一些关于产品的常见问题说明。</div>
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <el-dialog
      :title="dialogTitle+'支付宝账户'"
      :visible.sync="dialogBindingAlipay"
      class="dialogBindingAlipay"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="支付宝账号：" :label-width="formLabelWidth" prop="alipay">
          <el-input v-model="form.alipay" autocomplete="off" placeholder="请输入支付宝账号" />
        </el-form-item>
        <el-form-item label="真实姓名：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label :label-width="formLabelWidth">
          <el-button type="primary" :disabled="buttonFlag" @click="submitForm('form')">确 定</el-button>
          <el-button @click="dialogBindingAlipay = false">取 消</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" />
    </el-dialog>
    <el-dialog
      :title="dialogTitle+bindingName+'账户'"
      :visible.sync="dialogBindingWechat"
      class="dialogBindingAlipay"
    >
      <div class="content-binding">
        <div class="first">二维码有效时长为5分钟，请尽快绑定</div>
        <div class="second">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585720777680&di=9543b75b86866c85007ef25d1f737aa0&imgtype=0&src=http%3A%2F%2Fcdn.img-sys.com%2Fcomdata%2F92440%2F202001%2F20200103172945ee936c.jpg"
            alt="二维码"
          >
        </div>
        <div class="third">
          <div class="img">
            <img :src="require('@/assets/images/icon-scan.png')" alt>
          </div>
          <div>
            <div>请使用{{ bindingName }}扫一扫</div>
            <div>扫描二维码绑定</div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" />
    </el-dialog>
  </div>
</template>
<script>
import { updateAccount, addAccount, getAccount, wxlogin } from '@/api/finance';
import { mapGetters } from 'vuex';
export default {
  name: 'Binding',
  data() {
    /* var validateBankId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入银行卡卡号'));
      } else {
        if (value.length < 16 || value.length > 19) {
          callback(new Error('请正确输入银行卡卡号'));
        } else {
          callback();
        }
      }
    }; */
    var validateAlipay = (rule, value, callback) => {
      if (!value || value === '') {
        callback(new Error('请输入支付宝账号'));
      } else {
        const email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        const phone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if (email.test(value)) {
          callback();
        } else if (phone.test(value)) {
          callback();
        } else {
          callback(new Error('请正确输入支付宝账号！'));
        }
      }
    };
    var validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入您的真实姓名'));
      } else {
        // if (value.length > 1) {
        callback();
        // } else {
        //   callback(new Error("请正确输入姓名"));
        // }
      }
    };
    return {
      msg: '绑定支付账户',
      dialogBindingAlipay: false,
      dialogBindingWechat: false,
      form: {
        alipay: '',
        name: '',
        // 支付宝账号回显
        flag: false,
        alipayName: '',
        alipayPhone: '',
        id: ''
      },
      bankCheck: [
        {
          value: '0',
          label: '中国银行'
        },
        {
          value: '1',
          label: '中国工商银行'
        }
      ],
      subbranckCheck: [
        {
          value: '0',
          label: '中国银行'
        },
        {
          value: '1',
          label: '中国工商银行'
        }
      ],
      formLabelWidth: '120px',
      rules: {
        alipay: [{ validator: validateAlipay, trigger: 'blur' }],
        name: [{ validator: validateName, trigger: 'blur' }]
      },
      bindingName: '',
      dialogTitle: '',
      buttonFlag: false,
      // 微信是否绑定了
      wechatFlag: false,
      // 微信返回code的href地址
      wxHref: '',
      // 微信返回
      wxName: '',
      wxId: '',
      return: false,
      loading: false
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  created() {
    this.getAccountDetail();
    this.getWxBindingURL();
    if (window.location.href.includes('?')) {
      // 微信返回地址栏code;
      this.returnCode();
    }
  },
  methods: {
    submitForm(formName) {
      this.buttonFlag = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dialogBindingAlipay = false;
          // “phone”:”账号” “name”:”真实姓名”
          let param = {};
          if (this.form.flag) {
            param = {
              shopId: this.shopInfo.id,
              type: '01700001',
              phone: this.form.alipay,
              name: this.form.name,
              id: this.form.id
            };
            // {shopId:'',“id”:”id”,“name”:”真实姓名”,“phone”:”账号”,“openid”:”openid”,“type”:”01700001支付宝 01700002微信”}
            updateAccount(param)
              .then(res => {
                if (res.code === '0000') {
                  this.$message.success('绑定成功');
                  this.form.name = '';
                  this.form.alipay = '';
                  this.getAccountDetail();
                } else {
                  this.$message.error('绑定失败');
                }
                this.buttonFlag = false;
              })
              .catch(res => {
                this.buttonFlag = false;
              });
          } else {
            param = {
              shopId: this.shopInfo.id,
              type: '01700001',
              phone: this.form.alipay,
              name: this.form.name
            };
            addAccount(param)
              .then(res => {
                if (res.code === '0000') {
                  this.$message.success('绑定成功');
                  this.getAccountDetail();
                } else {
                  this.$message.error('绑定失败');
                }
                this.buttonFlag = false;
              })
              .catch(res => {
                this.buttonFlag = false;
              });
          }
        } else {
          this.buttonFlag = false;
          return false;
        }
      });
    },
    getAccountDetail() {
      this.loading = true;
      const param = {
        shopId: this.shopInfo.id
      };
      getAccount(param)
        .then(res => {
          for (const item of res.data) {
            // 支付宝
            if (item.type === '01700001') {
              this.form.alipayName =
                '已绑定（*' + item.name.split('').pop() + '）';
              this.form.flag = true;
              this.form.id = item.id;
            }
            if (item.type === '01700002') {
              if (item.name) {
                const name = item.name.split('');
                this.wxName = '已绑定（*' + name[name.length - 1] + '）';
              } else {
                this.wxName = '已绑定（***)';
              }
              this.wxId = item.id;
              this.wechatFlag = true;
            }
          }
          this.loading = false;
        })
        .catch(res => {
          this.wechatFlag = false;
        });
    },
    // 获取微信绑定地址
    getWxBindingURL() {
      wxlogin({}).then(res => {
        this.wxHref = res.data;
      });
    },
    toBindingwx() {
      if (this.wxHref) {
        location.href = this.wxHref;
      }
    },
    // 微信返回地址栏code;
    returnCode() {
      const href = window.location.href;
      const need = href.split('?');
      for (const item of need[1].split('&')) {
        if (item.includes('code')) {
          const code = item.split('=')[1];
          if (this.wechatFlag) {
            // 已经绑定微信了（修改）
            const param = {
              shopId: this.shopInfo.id,
              type: '01700002',
              openid: code,
              id: this.wxId
            };
            updateAccount(param).then(res => {
              if (res.code === '0000') {
                this.$message.success('绑定微信成功');
                this.getAccountDetail();
              } else {
                this.$message.error('绑定微信失败');
              }
            });
          } else {
            // 未绑定微信（绑定）
            const param = {
              shopId: this.shopInfo.id,
              type: '01700002',
              openid: code
            };
            addAccount(param).then(res => {
              if (res.code === '0000') {
                this.$message.success('绑定微信成功');
                this.getAccountDetail();
              } else {
                this.$message.error('绑定微信失败');
              }
            });
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
$messagecolor: #838a9d;
.binding {
  color: #3c4353;
  background: #fff;
  font-size: 14px;
  .binding-top {
    height: 60px;
    border-bottom: 1px solid #e9e9e9;
    font-weight: 600;
    line-height: 60px;
    padding-left: 30px;
  }
  .binding-main {
    padding: 60px 14%;
    .binding-car {
      border-bottom: 1px solid #e9e9e9;
      padding: 0 15% 60px 15%;
      h4 {
        background: url("../../assets/images/iconbg-nav.png") no-repeat 0 2px;
        background-size: 5px 12px;
        text-indent: 10px;
      }
      & > div {
        padding-left: 10px;
        display: flex;
        flex-flow: column nowrap;
        line-height: 22px;
        span {
          display: inline-block;
          min-width: 90px;
          text-align: right;
        }
        .binding-bank-off {
          & > div {
            cursor: pointer;
            width: 250px;
            height: 150px;
            border: 1px dashed #dce1ee;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            img {
              margin-bottom: 10px;
            }
          }
        }
        .binding-bank-car {
          display: flex;
          margin: 30px 0 30px 0;
          .binding-bank-car-bank {
            margin-right: 20px;
          }
        }
        .el-button {
          width: 100px;
          height: 36px;
          padding: 0;
          line-height: 36px;
        }
      }
    }
    .pay-binding {
      width: 420px;
      height: 100px;
      display: flex;
      background: #f6f8f9;
      align-items: center;
      margin-bottom: 20px;
      position: relative;
      .pay-binding-image {
        width: 120px;
        height: 50px;
        margin: 0 16px 0 22px;
        /deep/img {
          width: 120px;
          height: 50px;
        }
      }
      .pay-binding-user {
        & > .change {
          position: absolute;
          right: 20px;
        }
      }
    }
  }
  .binding-message {
    padding: 20px 0 0 14%;
    color: $messagecolor;
    & > div {
      padding-top: 12px;
      line-height: 22px;
    }
  }
}
/deep/.el-input__inner {
  height: 36px;
  width: 300px;
}
/deep/.el-form-item__label {
  padding-right: 0;
  color: #838a9d;
  font-weight: 400;
}
.dialogBindingAlipay {
  //遮罩层
  .content-binding {
    display: flex;
    line-height: 22px;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    .second {
      width: 317px;
      height: 317px;
      border: 2px solid #ececec;
      overflow: hidden;
      margin: 20px 0 25px 0;
      img {
        width: 317px;
        height: 317px;
      }
    }
    .third {
      display: flex;
      justify-content: center;
      align-items: center;
      .img {
        margin-right: 25px;
        width: 30px;
        height: 30px;
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  /deep/.el-dialog {
    width: 486px;
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #eeeeee;
    font-weight: 600;
  }
  /deep/.el-dialog__body {
    padding: 32px 0 0 0px !important;
  }
  /deep/.el-dialog__footer {
    text-align: left;
    padding: 0 0 50px 140px;
  }
  /deep/.el-button {
    width: 100px;
    height: 36px;
    padding: 0;
    line-height: 36px;
    margin-right: 10px;
  }
}
.detail-change-remark {
  display: flex;
  .detail-content {
    width: 400px;
    height: 150px;
  }
  .el-input {
    width: 400px;
    height: 150px;
  }
}
</style>
